<template>
	<view class="home">
		<x-skeleton
			:configs="{padding: '0 30rpx',gridRows: 6,headHeight: '140rpx'}" 
			type="banner" 
			:loading="skeletonLoading">
			<view class="home-list">
				<view 
					v-for="(item, index) in cates"
					:key="index"
					class="item flex align-center">
					<view v-if="item.image" class="item-left">
						<u--image 
							:width="40"
							:height="40"
							radius="16rpx"
							:src="item.image" 
							mode="aspectFill"></u--image>
					</view>
					<view class="item-inner">
						{{ item.name }}
					</view>
					<view @click="clickEye(item)" class="icon-cha flex align-center justify-center">
						<u-icon :name="item.password ? 'lock-fill' : 'lock-opened-fill'" size="50rpx" color="#fff"></u-icon>
					</view>
				</view>
				
				<empty :show="!cates.length" />
			</view>
		</x-skeleton>
		
		<u-popup 
			v-if="showConfirm"
			:show="showConfirm" 
			mode="center"
			:round="10"
			:customStyle="{width: '90%'}"
			@close="showConfirm = false">
			<view class="popupBox">
				<view class="title">请输入查看密钥</view>
				<u--input
				    placeholder="请输入查看密钥"
				    border="surround"
					fontSize="28rpx"
				    v-model="keywords"
				  ></u--input>
				<view class="btnbox flex align-center">
					<u-button 
						type="success" 
						shape="circle" 
						text="确定" 
						:custom-style="{marginLeft: '30rpx',fontSize: '28rpx'}"
						@click="save"></u-button>
					<u-button 
						shape="circle" 
						text="取消" 
						:custom-style="{marginLeft: '30rpx',fontSize: '28rpx'}"
						@click="showConfirm = false"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getCategory, getGoodsList, getIndexBlock } from '@/api/common'
	
	export default {
		data() {
			return {
				skeletonLoading: true,
				borderColor: this.defaultColor,
				showConfirm: false,
				params: {},
				keywords: '',
				cates: []
			}
		},
		onShareAppMessage(res) {
			let path = '/pages/index/index'
			
			return {
				path
			}
		},
		onLoad(options) {
			if (options.path) {
				uni.navigateTo({
					url: JSON.parse(decodeURIComponent(options.path))
				})
			}
			
			const set = uni.getStorageSync(this.constants.STORAGE_SETTING_KEY)
			if (set.name) {
				uni.setNavigationBarTitle({
					title: set.name
				})
			}
			
			this.getCates()
		},
		onPullDownRefresh() {
			this.getCates()
		},
		methods: {
			getCates() {
				getCategory().then(res => {
					this.cates = res
				}).finally(() => {
					this.skeletonLoading = false
					uni.stopPullDownRefresh()
				})
			},
			clickEye(item) {
				this.keywords = ''
				this.params = item
				if (this.params.password) {
					this.showConfirm = true
				} else {
					this.openPage()
				}
			},
			save() {
				if (!this.keywords) {
					this.$u.toast('请输入查看密钥')
					return
				}
				if (this.keywords != this.params.password) {
					this.$u.toast('查看密钥不正确，请重新输入')
					return
				}
				this.showConfirm = false
				this.openPage()
			},
			openPage() {
				this.$common.openUrl(`/packages/product/list?obj=${encodeURIComponent(JSON.stringify(this.params))}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
.item {
	padding: 30rpx;
	&:not(:first-child) {
		border-top: 1px solid rgba(0, 0, 0, .05);
	}
	&-inner {
		flex: 1;
		padding: 0 30rpx;
		font-size: 30rpx;
		font-weight: 700;
	}
	.icon-cha {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: $uni-defaultcolor;
		font-size: 30rpx;
	}
}
.popupBox {
	height: 40vh;
	padding: 30rpx;
	.title {
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		padding: 20rpx 0 50rpx;
	}
	.btnbox {
		margin-top: 40rpx;
		margin-left: -30rpx;
	}
}
</style>
